* {
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
@font-face {
font-family: "sans";
src: url(font/sans.ttf);
}
body {
min-height: 100vh;
font-family: 'sans';
margin: 0 auto;
color: white;
}
h3 {
background-color: #333;
top: 0;
margin: 0;
padding: 10px;
text-align: center;
user-select: none;
}
.sidebar {
background-color: #333;
box-shadow: 0px 0px 10px rgba(30, 30, 30, 0.7);
position: absolute;
left: 0;
top: 0;
height: 100%;
padding: 5px;
z-index: 1000;
}
.sidebar ul {
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
list-style-type: none;
padding: 0;
margin: 0;
height: 100%;
}
.sidebar ul li {
padding: 5px 0;
}
.sidebar input,
.sidebar button {
cursor: pointer;
text-align: center;
width: 50px;
}
.sidebar li:last-of-type {
margin-top: auto;
}
.sidebar button {
background-color: transparent;
border: none;
color: #fff;
font-size: 15px;
cursor: pointer;
}
.sidebar label {
display: block;
font-size: 12px;
}
button {
background-color: black !important;
cursor: pointer;
/* margin: 10px; */
/* font-size: 1.2rem; */
padding: 8px;
border-radius: 10%;
border: none;
outline: none;
}
button:active {
background-color: #1e8e3e !important;
}
footer {
background: #333;
text-align: center;
font-size: 0.8rem;
position: absolute;
left: 0;
right: 0;
bottom: 0;
margin-bottom: 0;
padding: 5px;
line-height: 3vh;
}
footer a:visited {
color: inherit;
}
.sidebar .radio {
display: flex;
align-items: center;
margin-left: -15px;
}
.checkboxContainer {
display: flex;
align-items: center;
margin-bottom: 20px;
}
input[type="checkbox"] {
width: 30px;
}
input[type="color"] {
margin-bottom: 10px;
}
.strokeContainer {
margin-bottom: 10px;
}